<template>

  <el-tree-v2 ref="treeRef" :data="data" :props="props" :height="208" show-checkbox @check="checkMenuTree"
    :default-checked-keys="defaultCheckedkeys" />

</template>
<script lang="ts" setup>
import { TreeNodeData } from 'element-plus/es/components/tree-v2/src/types';
import { TreeData, TreeKey } from 'element-plus/lib/components/tree-v2/src/types';
import {  onMounted, Ref, ref, watch } from 'vue';
import { Recordable } from '/#/global';


interface TreeOptionProps {
  children?: string;
  label?: string;
  value?: string;
  disabled?: string;
}

const props = defineProps<{
  data: Array<Recordable>
  props?: TreeOptionProps
  defaultCheckedkeys?: Array<number | string>
}>()


const treeRef = ref();

const emit = defineEmits<{
  (e: 'check', data: Ref<Array<TreeKey>>): void
}>()


onMounted(() => {
  // DOM 元素将在初始渲染后分配给 ref
  watch(() => props.defaultCheckedkeys, (newValue, oldValue) => {
    treeRef.value.setCheckedKeys(newValue)
  })
})


const checkMenuTreeData = ref<TreeKey[]>([])

const checkMenuTree = (data: TreeNodeData, info: { checkedKeys: TreeKey[], checkedNodes: TreeData, halfCheckedKeys: TreeKey[], halfCheckedNodes: TreeData, }) => {
  checkMenuTreeData.value = [...info.checkedKeys, ...info.halfCheckedKeys]
  emit('check', checkMenuTreeData)
}



</script>

<style lang="scss" scoped>
</style>